<template>
  <div>
    <!-- 页面区域 -->
    <div class="page-view">
      <div style="display: flex;gap: 10px;margin-bottom: 20px;">
        <el-input
          v-model="queryParam.account"
          style="width: 240px"
          placeholder="Please input"
        >
        </el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="account" label="用户名" align="center" />
        <el-table-column prop="nickName" label="昵称" align="center" />
        <el-table-column prop="realName" label="真实姓名" align="center" />
        <el-table-column prop="mobile" label="手机号" align="center" />
        <el-table-column prop="mobile" label="创建时间" align="center" />
        <!-- 省略其他列 -->
        <el-table-column prop="operation" label="操作" fixed="right">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="confirmDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件，使用 Element Plus 的 Pagination 组件 -->
      <el-pagination
        style="margin-top: 20px"
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :page-sizes="[10, 20, 50, 100]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :pager-count="5"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 弹窗区域 -->
    <el-dialog v-model="dialogFormVisible" title="编辑" width="500">
      <el-form :model="dialogForm">
        <el-form-item label="账号">
          <el-input v-model="dialogForm.account" disabled />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="dialogForm.nickname" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="dialogForm.mobile" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="dialogForm.email" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="handleEsitUser">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { getUserBycriteria, editUser, removeUser } from "@/api/user.js";
import { ElMessage, ElMessageBox } from "element-plus";
const tableData = ref([]);
const dialogFormVisible = ref(false);
const queryParam = ref({ account: "" });
const dialogForm = ref({
  account: "",
  nickName: "",
  mobile: "",
  email: "",
});
const pagination = ref({
  page: 0,
  size: 5,
  total: 0,
});
const getTableData = async () => {
  const params = {
    page: pagination.value.page,
    size: pagination.value.size,
    account: queryParam.value.account,
  };
  const res = await getUserBycriteria(params);
  console.log(res);
  tableData.value = res.data.records;
  pagination.value.total = res.data.total
};

const handleSearch = () => {
  pagination.value.page = 0
  getTableData();
  
};

const handleCurrentChange = (e) =>{
  pagination.value.page = e
  getTableData();
} 

const handleSizeChange = (e) =>{
  pagination.value.size = e
  getTableData();
} 

const handleEdit = (row) => {
  dialogForm.value = {};
  dialogForm.value = { ...row };
  dialogForm.id = row.id;
  console.log(row);
  dialogFormVisible.value = true;
};

const handleRemove = () => {
  dialogFormVisible.value = true;
};

const handleEsitUser = async () => {
  await editUser(dialogForm.id, dialogForm.value);
  dialogFormVisible.value = false;
  getTableData();
};

const confirmDelete = (row) => {
  ElMessageBox.confirm("确定要删除该数据?", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(async () => {
      await removeUser(row.id);
      ElMessage({
        type: "success",
        message: "Delete completed",
      });
      getTableData();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};
onMounted(() => {
  getTableData();
});
</script>

<style scoped lang="scss">
.page-view {
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

</style>
